<template>
  <div ref="operateSpu" class="operate-spu">
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!spuManage.category3Id"
      @click="addSpu"
      >添加SPU</el-button
    >
    <el-table
      v-if="isShowTable"
      :data="spuList"
      style="width: 100%; margin-top: 20px"
      border
      stripe
    >
      <el-table-column label="序号" type="index" width="80px" />
      <el-table-column label="SPU名称" prop="spuName" width="width" />
      <el-table-column label="SPU描述" prop="description" width="width" />
      <el-table-column label="操作" width="width">
        <template #default="{ row }">
          <template v-if="spuList.length !== 0">
            <HintButton
              v-for="(item, index) in hintButtonList"
              :key="index"
              v-bind="item"
              @click="onClick(index, row)"
            />
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px; text-align: center"
      :disabled="isDisabled()"
      class="brand-pagination"
      :current-page.sync="currentPage"
      :page-sizes="[3, 5, 10]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      @size-change="spuManage.onGetSpuList()"
      @current-change="spuManage.onGetSpuList()"
    />
    <el-dialog
      :title="`${title}的sku列表`"
      :visible.sync="dialogTableVisible"
      @close="onClose"
    >
      <el-table
        v-loading="tableLoading"
        :data="skuList"
        border
        stripe
        height="450"
      >
        <el-table-column prop="skuName" label="名称" />
        <el-table-column prop="price" label="价格" min-width="50px" />
        <el-table-column prop="weight" label="重量" min-width="50px" />
        <el-table-column label="默认图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.skuDefaultImg"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import HintButton from "components/hintButton";
import pagenation from "@/mixin/pagenation";
import { setItem } from "utils/storage";
export default {
  name: "OperateSpu",
  components: {
    HintButton,
  },
  mixins: [pagenation],

  props: {
    spuList: {
      type: Array,
      default: () => [],
    },
    category3Id: {
      type: [String, Number],
      required: true,
    },
    total: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      // sku列表
      skuList: [],
      // sku列表标题
      title: "",
      dialogTableVisible: false,
      isShowTable: true,
      tableLoading: false,
      hintButtonList: [
        {
          icon: "el-icon-plus",
          type: "success",
          content: "添加SKU",
          size: "mini",
        },
        {
          icon: "el-icon-edit",
          type: "warning",
          content: "编辑SKU",
          size: "mini",
        },
        {
          icon: "el-icon-warning",
          type: "primary",
          content: "查看Sku列表",
          size: "mini",
        },
        {
          icon: "el-icon-delete",
          type: "danger",
          content: "添加SPU",
          size: "mini",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  inject: {
    spuManage: {
      type: Object,
    },
  },
  methods: {
    isDisabled() {
      // 没有SPU和总数小于4不让用户点分页器
      if (
        this.ispaginationDisable ||
        this.spuList.length === 0 ||
        this.total < 4
      ) {
        return true;
      } else {
        return false;
      }
    },
    addSpu() {
      this.$emit("add-edit-spu");
    },
    onClick(index, row) {
      const strategies = {
        0: () => {
          setItem("spuRow", row);
          this.$emit("change-skuform", row);
        },
        1: () => {
          setItem("spuRow", row);
          this.$emit("add-edit-spu");
        },
        2: async () => {
          this.dialogTableVisible = true;
          this.tableLoading = true;
          const res = await this.$api.spu.getSkuList(row.id);
          this.skuList = res.data;
          this.title = row.spuName;
          this.tableLoading = false;
        },
        3: async () => {
          try {
            await this.$confirm(`确定要删除${row.spuName}吗?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            });
            const res = await this.$api.spu.deleteSpu(row.id);
            if (res.code === 200) {
              this.$message.success("删除成功");
              if (this.spuList.length === 1) {
                this.currentPage = this.currentPage - 1;
              }
              this.spuManage.onGetSpuList();
            } else {
              this.$message.error("删除失败");
            }
          } catch (error) {
            if (error === "cancel") {
            } else {
              this.$message.error(error.message);
            }
          }
        },
      };
      strategies[index]();
    },
    onClose() {
      this.skuList = [];
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style scoped lang="scss">
.operate-spu {
  height: 100%;
  width: 100%;
}
</style>
